// /**
//  * PostCSS 的配置文件
//  * PostCSS 是基于 Node.js 运行的一个处理 CSS 的工具
//  * 所以它的配置文件也是运行在 Node.js 中
//  */
//
// // PostCSS 配置文件需要导出一个对象
// module.exports = {
//   // 配置要使用的相关插件
//   plugins: {
//     // 自动添加浏览器厂商声明前缀，用来兼容不同的浏览器
//     // VueCLI 已经在内部默认配置了 autoprefixer
//     // autoprefixer: {
//     //   // browsers 用来配置要兼容到的系统(浏览器)环境
//     //   // 这个配置没有问题，但是写到这里会有控制台编译警告
//     //   // 为什么？因为 VueCLI 是通过项目中的 .browserslistrc 文件来配置要兼容的环境信息的
//     //   browsers: ['Android >= 4.0', 'iOS >= 8']
//     // },
//
//     // 把 px 转为 rem
//     'postcss-pxtorem': {
//       // 转换的根元素基准值
//       // 正常情况下按照你的设计稿来
//       // 750 宽的设计稿，750 / 10 = 75
//       // 375 宽的设计稿，375 / 10 = 37.5
//       // Vant 组件库是基于 375 宽写的
//       // 移动端页面一般都是以 iphone 6/7/8 为原型设计的
//       // Vant 组件库是基于逻辑像素 375 写的
//       // 设计稿都是基于物理像素 750 宽设计的
//       // 所以如果设置成 75，那么我们就可以在设计稿中测量多少就写多少，但是 Vant 的样式就会变得很小，小了一半
//       // 所以我们还必须设置成 37.5，但是在测量我们的设计稿的时候我们必须让你的测量单位 / 2
//       // 有没有更好的办法：不用计算
//       rootValue: 37.5,
//
//       // 需要转换的 CSS 属性，* 就是所有属性都要转换
//       propList: ['*']
//     }
//   }
// }
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      // 设计稿基准值，在转换时会将 px / rootValues
      rootValue: 37.5,
      // * 代表所有px都被转换，! 代表过滤的内容，
      propList: ['*', '!border*'] /* 这里的 !border* 表示过滤所有 border 的转换 */
    }
  }
}
